<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据表格</title>
		<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link id="easyuiTheme" rel="stylesheet" type="text/css" href="./js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="./js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="./css/default.css">
		<script type="text/javascript" src="./js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" charset="UTF-8" src="./js/ztree/jquery.ztree.all-3.5.js"></script>
		<link rel="stylesheet" href="./js/ztree/zTreeStyle.css" type="text/css"/> 
		<script>
			$(function(){
				$("#datagrid").datagrid({    
				    url:'data.json',    
				    columns:[[    
				        {field:'id',title:'编号',width:100, align:'center'},
				        {field:'name',title:'名称',width:100,align:'center'},
				        {field:'price',title:'价格',width:100,align:'center'}
				    ]] ,
				    //分页的组件
				    pagination:true,
					//工具栏
                    toolbar : [{
                        id: 'button-add',
                        text: '增加',
                        iconCls: 'icon-add',
                        handler: function() {
                            $("#standardWindow").window('open');
                        }
                    }, {
                        id: 'button-edit',
                        text: '修改',
                        iconCls: 'icon-edit',
                        handler: function() {
                            alert('修改');
                        }
                    }]

            });

			});
			
		</script>
	</head>
	<body>
		<table id="datagrid"></table>
	</body>
</html>
